<template lang="html">
  <div id="search-input" @click.stop="skip">
    <div class="placeholder" v-if="link"></div>
    <form action="">
      <input
        ref="searchInput"
        type="search"
        name="communityName"
        class="search-input"
        :class="{default: defaultVal}"
        :placeholder="defaultVal || placeholder"
        autocomplete="off"
        v-model="inputValue"
        @input="$emit('input', inputValue)"
        @keyup.13="$emit('submit')">
    </form>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    link: {
      type: String,
      default: ''
    },
    defaultVal: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      inputValue: ''
    }
  },
  methods: {
    skip () {
      if (this.link !== '') {
        this.$router.replace(this.link)
        // this.defaultVal ? this.$router.replace(this.link) : this.$router.push(this.link)
      }
    }
  },
  created () {
    this.$nextTick(() => {
      if (!this.link) this.$refs.searchInput.focus()
    })
  }
}
</script>

<style lang="less" scoped>
  @import "../../../styles/baseVar.less";
  #search-input{
    width: 100%;
    height: 30px; /* 52/40 */
    line-height: 30px; /* 52/40 */
    padding: 0 5px; /* 10/40 */
    padding-left: 34px;
    border: 1px solid #dadada;
    border-radius: 4px; /* 5/40 */
    position: relative;
    box-sizing: border-box;
    background: #f6f6f6 url('../../../images/rent/search_icon.png') 12px no-repeat;
    background-size: 14px;
    .placeholder{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 100%;
      z-index: 100;
    }
    .search-input{
      position: relative;
      width: 100%;
      height: 100%;
      vertical-align: top;
      border: none;
      outline: none;
      background: transparent;
      z-index: 10;
      &::-webkit-input-placeholder{
        color: #c1c0c0;
      }
      &.default::-webkit-input-placeholder{
        color: #000;
      }
    }
    .icon{
      display: inline-block;
    }
    form{
      position: relative;
      width: 100%;
      height: 100%;
      background: transparent;
    }
    input[type="search"]::-webkit-search-cancel-button {
      -webkit-appearance: none;
    }
  }
</style>
